<template>
	<el-dialog :title="title" v-model="open" :close-on-click-modal="false" width="1000px">
    <el-row :gutter="20">
      <!-- <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
        <el-form-item label="商品ID" prop="goods_id">
          <el-input v-model="queryParams.goods_id" placeholder="请输入商品ID" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
          <el-button @click="onExport" type="warning" plain icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form> -->
    </el-row>
    <el-row :gutter="20">
      <el-table :data="tableList" v-loading="loading">
        <el-table-column label="发货时间" align="center" prop="send_time" key="1" />
        <el-table-column label="支付时间" align="center" prop="pay_time" key="2" />
        <el-table-column label="商品ID" align="center" prop="goods_id" key="3" />
        <el-table-column label="商品名称" align="center" prop="title" key="4" />
        <el-table-column label="应发货数量" align="center" key="5">
          <template #default="{ row }">
            <el-link type="primary" @click="onOpenLogisticsOrder(0, row)">{{ row.send_num }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="实际发货数量" align="center" prop="reality_send_num" key="6">
          <template #default="{ row }">
            <el-link type="primary" @click="onOpenLogisticsOrder(1, row)">{{ row.reality_send_num }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="未发货数量" align="center" prop="reality_send_num" key="6">
          <template #default="{ row }">
            <el-link type="primary" @click="onOpenLogisticsOrder(2, row)">{{ Number(row.send_num) - Number(row.reality_send_num) }}</el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination-component
        style="margin: auto;"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
		
    <GoodOrderStatisticsDialog ref="goodOrderStatisticsRef" />
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { statisticsGoodsSendApi } from '/@/api/admin1';
import GoodOrderStatisticsDialog from './goodOrderStatisticsDialog.vue'

const StatisticsGoodsSendApi = statisticsGoodsSendApi()
export default {
  name: 'goodDeliveryStatisticsDialog',
  components: {
    GoodOrderStatisticsDialog,
  },
	setup() {
		const state = reactive({
			showSearch: true,
			title: '商品发货统计详情',
			open: false,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				pay_time: '',
			},
			tableList: [],
			loading: false,
			total: 0,
		});
		const queryFormRef = ref(null);

    const goodOrderStatisticsRef = ref(null);

		/********** 点击事件(on开头) **********/
    // 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
    // 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
    // 打开物流订单统计
    // status 状态 0：全部 1：已发货 2：未发货
    const onOpenLogisticsOrder = (status, row) => {
      (goodOrderStatisticsRef.value as any)?.openDialog({
        status: status,
        goods_id: row.goods_id,
        pay_time: row.pay_time,
      })
    };
		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any) => {
			state.open = true;
			state.queryParams = {
				pageNum: 1,
				pageSize: 10,
				pay_time: config.pay_time,

			};
			getList();
		};
		const getList = () => {
			state.loading = true;
			_statisticsGoodsDetailsList(state.queryParams)
		};

		/********** 网络请求 **********/
		// 商品发货统计详情
		const _statisticsGoodsDetailsList = (_data: any) => {
			StatisticsGoodsSendApi.statisticsGoodsDetailsList(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};

		return {
      queryFormRef,
      goodOrderStatisticsRef,
			getList,
			openDialog,
      onQuery,
      onResetQuery,
      onOpenLogisticsOrder,
			...toRefs(state),
		};
	},
};
</script>
